<template>
    <div class="card-container">
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col>
                    <img src="~@/assets/image/logo.png" style="width: 5vh;height: 3vh" alt="Logo">
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col>
                    <el-carousel :interval="3000" class="custom-carousel">
                        <el-carousel-item v-for="item in pictures" :key="item">
                            <el-image :src="item"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
            <h3 style="color: #00eded;text-align: center">{{ equipName }}</h3>


            <el-descriptions class="margin-top" :column="1" style="font-size: 15px;" border>
                <el-descriptions-item v-for="item in specifications">
                    <template slot="label">
                        {{ item.nameKey}}
                    </template>
                    {{ item.nameValue}}
                </el-descriptions-item>
            </el-descriptions>

            <el-row v-for="item in files">
                <el-button round style="width: 100%;margin-top: 10px;" icon="el-icon-tickets" @click="fileVisible(item)">{{ item.name }}</el-button>
            </el-row>

        </el-card>


        <el-dialog :title="title" :visible.sync="buttonVisible" top="30vh" width="50vh" :top="'10%'"
                   class="home-confirm-dialog" v-if="buttonVisible">
<!--            <el-row >-->
<!--&lt;!&ndash;                <el-button round style="width: 80%;margin-top: 10px;font-size: 10px;" @click="handleReview(item)" size="mini">&ndash;&gt;-->
<!--&lt;!&ndash;                    {{ item.fileName }}&ndash;&gt;-->
<!--&lt;!&ndash;                </el-button>&ndash;&gt;-->
<!--                <el-link size="mini" style="margin-left: 5%" type="primary" @click="handleDownload(item)">{{ item.fileName }} 下载</el-link>-->
<!--               -->
<!--            </el-row>-->
            <ul v-for="item in productFiles">
                <li>
                    {{ item.fileName }} <el-link size="mini" style="margin-left: 5%" type="primary" @click="handleDownload(item)">下载</el-link>
                </li>
            </ul>
        </el-dialog>



    </div>
</template>

<script>
import {product} from "@/api/manage";

export default {
    name: "index",
    data(){
        return {
            code: null,
            pictures: [],
            equipName: null,
            specifications: [],
            files: [],

            title: null,
            buttonVisible: false,
            productFiles: [],

            IMGLink: this.IMGLink,
        }
    },
    methods: {
        fileVisible(item){
            this.buttonVisible = true;
            this.title = item.name
            this.productFiles = item.pFiles;
            // console.log(item)
        },
        handleReview(item){
            console.log(item)
            let filePath = this.IMGLink + item.filePath;
            if (item.filePath) {
                if (item.filePath.includes(".png") || item.filePath.includes(".jpg") || item.filePath.includes(".jpeg")) {
                    window.open(filePath);
                } else {
                    // console.log("https://view.officeapps.live.com/op/embed.aspx?src=" + filePath)
                    //https://view.officeapps.live.com/op/view.aspx

                    // let lll = "https://testeoms.dpcpower.com/static/product/9c840ede-cb22-4361-ba37-a5e7cb921b1d.docx";
                    let lll = "https://testeoms.dpcpower.com/static/product/b0bd6410-b5a7-44a7-b414-52f3477d74db.doc";

                    window.open(
                        "https://view.officeapps.live.com/op/view.aspx?src=" + lll
                    );
                }
            } else {
                this.$message.warning("暂无文件");
            }
        },
        handleDownload(item){
            let filePath = this.IMGLink + item.filePath;
            window.location.href = filePath;
        },
        getProduct(){
            this.files = [];
            this.specifications = [];
            this.equipName = null;
            this.pictures = [];

            product(`/qr/single/${this.code}`, 'post').then( (res) => {
                if(res.code == 200) {
                    let data = res.data;

                    this.pictures = data.pictures.split(',').map(item => {
                        return this.IMGLink + item;
                    });

                    this.equipName = data.name
                    this.specifications = data.specificationsList;

                   let fileList = data.fileList;

                   Object.keys(fileList).map((m, n) => {
                       Object.values(fileList).map((item, index) => {
                            if (n === index){
                                this.files.push({name: m, pFiles: item})
                            }
                       })
                   })

                }
            })
        },
    },
    mounted(){
        // console.log(this.$route.query)
        this.code = this.$route.query.code

        this.getProduct();
    },
}
</script>

<style scoped lang="scss">

::v-deep.home-confirm-dialog .el-dialog__body {
    max-height: calc(90vh - 100px);
    overflow: auto;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
}

.card-container{
    display: flex;
    justify-content: center;
    background-color: #4c7aca;
}

.box-card{
    height: 100vh;
    width: 60vh;
    overflow-y: auto;
}

.custom-carousel {
    width: 50vh; /* 设置你想要的宽度 */
    margin: 0 auto; /* 居中 */
    height: 35%; /* 设置你想要的高度 */
}

.custom-carousel el-image {
    width: 100%; /* 图片宽度填满容器 */
    height: 100%; /* 图片高度填满容器 */
    object-fit: cover; /* 确保图片覆盖整个容器，可能会裁剪图片 */
}
</style>
